<template>
  <div class="create-people">
    <el-form :model="peopleForm" :rules="rules" ref="peopleForm" label-width="90px" class="demo-form">
      <el-form-item label="用户名" prop="loginName">
        <el-input v-model="peopleForm.loginName" :disabled="title === PEOPLE_EDIT"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="peopleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model.number="peopleForm.phone" :disabled="title === PEOPLE_EDIT"></el-input>
      </el-form-item>
      <el-form-item label="账号密码" prop="password" v-if="title === PEOPLE_INSERT">
        <el-input v-model="peopleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="角色权限" prop="roleCode">
        <el-select v-model="peopleForm.roleCode" placeholder="请选择角色权限" @change="roleChange">
          <el-option :label="item.name" :value="item.id" v-for="(item, index) in roleEnum" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管辖级别" prop="districtType" v-if="isShowDistrictType">
        <el-select v-model="peopleForm.districtType" placeholder="选择管辖级别" @change="wmLevelChange">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in WM_LEVEL_ENUM" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择省份" prop="provinceCode" v-if="isShowProvinceCode">
        <el-select v-model="peopleForm.provinceCode" placeholder="请选择省份" @change="provinceChange">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in regionData" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择城市" prop="cityCode" v-if="isShowCityCode">
        <el-select v-model="peopleForm.cityCode" placeholder="请选择城市" @change="cityChange">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in province.children" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <!--场所管理员-->
      <el-form-item label="管辖区域" prop="districtId" class="manage-district" v-if="isShowCommunitySelect">
        <ul class="more">
          <li v-for="(item,i) in districtData" :key="i" v-if="item.arr.length !== 0 || item.value === ''">
            <span class="more-con" :class="{'active': item.selected}">{{item.label}}</span>
            <div class="popover" v-if="item.arr.length !== 0">
              <div class="arrow"></div>
              <div class="p-content">
                <div class="popover-content"><span >{{item.label}}</span></div>
                <ul class="clear community">
                  <li v-for="(items, index) in item.arr" :key="index">
                      <span :class="{'active': peopleForm.districtId === items.id}"
                            @click="checkAll(item, items, districtData)">{{items.site_name}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </el-form-item>
      <!--仓库管理员-->
      <el-form-item label="管辖区域" prop="districtName" class="manage-district" v-if="isShowStoreSelect && showWm">
        <el-radio-group v-model="peopleForm.districtName" @change="wmChange">
          <el-radio :label="item.name" v-for="(item, index) in wmData" :key="index">{{item.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--运营公司-->
      <el-form-item label="运营公司" prop="company" v-if="isShowOperateCompany">
        <el-select v-model="peopleForm.company" placeholder="请选择运营公司" @change="operateCompanyChange">
          <el-option :label="item.name" :value="item.name" v-for="(item, index) in companys" :key="index"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="cancel" class="btnClosed">取  消</el-button>
      <el-button type="primary" @click="sure('peopleForm')" class="btnSaved">确  定</el-button>
    </div>
  </div>
</template>

<script>
  import Config from '../../../../config'
  // import { regionData } from 'element-china-area-data'
  import { regionData } from 'static/js/regionData'
  import { mapGetters } from 'vuex'
  export default {
    name: 'CreatePeople',
    props: {
      form: {
        type: Object,
        default: function () {
          return {
            loginName: '',
            name: '',
            phone: '',
            password: '',
            roleCode: '',
            districtId: '',
            districtName: '',
            districtType: '',
            provinceCode: '',
            cityCode: '',
            company: ''
          }
        }
      },
      title: {
        type: String,
        default: ''
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      roleEnum: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      /**
       * 后台判断用户名是否重复
       * */
      const isLoginNameDuplicate = (name) => {
        return new Promise((resolve, reject) => {
          const url = `${Config.AUTH_URL}/user/getUserByLoginName`
          const param = {
            account: name,
            SystemId: '7'
          }
          this.$http.get(url, param)
            .then(data => resolve(data))
            .catch(e => reject(e))
        })
      }
      /**
       * 验证用户名
       * */
      const validateLoginName = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请填写用户名'))
        } else if (this.title === this.PEOPLE_EDIT) {
          callback()
        } else {
          isLoginNameDuplicate(value)
            .then(data => {
              if (data) {
                callback(new Error('用户名已经存在'))
              } else {
                callback()
              }
            })
        }
      }
      /**
       * 后台判断手机号是否重复
       * */
      const isPhoneDuplicate = (phone) => {
        return new Promise((resolve, reject) => {
          const url = `${Config.AUTH_URL}/user/getUserByPhone`
          const param = {
            phone,
            SystemId: '7'
          }
          this.$http.get(url, param)
            .then(data => resolve(data))
            .catch(e => reject(e))
        })
      }
      /**
       * 验证手机号码
       *
       * 正则：手机号（精确）
       * <p>移动：134(0-8)、135、136、137、138、139、147、150、151、152、157、158、159、（165）、（172）、178、182、183、184、187、188、198</p>
       * <p>联通：130、131、132、145、155、156、（171）、175、176、185、186、166</p>
       * <p>电信：133、（149）、153、173、（174）、177、180、181、189、（191）、199</p>
       * <p>全球星：1349</p>
       * <p>虚拟运营商：170</p>
       */
      const validatePhone = (rule, value, callback) => {
        const mobieReg = /^((13[0-9])|(14[5,7])|149|(15[0-3,5-9])|(17[0-8])|(18[0-9])|165|166|191|198|199)\d{8}$/
        if (!value) {
          callback(new Error('请填写电话号码'))
        } else if (!mobieReg.test(value)) {
          callback(new Error('请填写正确的电话号码'))
        } else if (this.title === this.PEOPLE_EDIT) {
          callback()
        } else {
          isPhoneDuplicate(value)
            .then(data => {
              if (data) {
                callback(new Error('电话号码已经存在'))
              } else {
                callback()
              }
            })
        }
      }
      return {
        PEOPLE_INSERT: '新增用户',
        PEOPLE_EDIT: '用户编辑',
        peopleForm: null,
        rules: {
          loginName: [
            {required: true, validator: validateLoginName, trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请填写姓名', trigger: 'blur'}
          ],
          phone: [
            {required: true, validator: validatePhone, trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请填写账户密码', trigger: 'blur'}
          ],
          roleCode: [
            {required: true, message: '请选择角色权限', trigger: 'change'}
          ],
          provinceCode: [
            {required: true, message: '请选择省份', trigger: 'change'}
          ],
          cityCode: [
            {required: true, message: '请选择城市', trigger: 'change'}
          ],
          districtId: [
            {required: true, message: '请选择地区', trigger: 'change'}
          ],
          districtName: [
            {required: true, message: '请选择地区名称', trigger: 'change'}
          ],
          districtType: [
            {required: true, message: '请选择地区类型', trigger: 'change'}
          ],
          company: [
            {required: true, message: '请选择运营公司', trigger: 'change'}
          ]
        },
        // 运营公司
        ROLE_COMPANY: 80, // 运营公司管理员
        ROLE_SUB_COMPANY: 79, // 子运营公司管理员
        ROLE_WM: 60, // 仓库管理员
        ROLE_COMMUNITY: 30, // 场所管理员
        ROLE_INSTALL: -1, // 安装人员 app
        // 消防
        ROLE_FIRE: 70, // 消防支队
        // 未知用户
        ROLE_VISTOR: -100, // 待分配访客（app注册用户）
        // 个人
        ROLE_C_GENERAL: -2, // c端普通用户
        // 保险公司
        ROLE_INSURANCE: 20,
        // 华强公司
        ROLE_SU: 100, // 超级管理员
        ROLE_CMU: 95, // 配置管理员
        ROLE_MU: 94, // 管理员
        ROLE_TEST: 93, // 西安测试
        ROLE_MARKET: 90, // 华强市场

        companys: [], // 所有的运营公司（从后台获取）
        hasRegionRole: [], // 有管辖区域的角色
        noRegionRole: [], // 无管辖区域的角色
        hasCompanyRole: [], // 有运营公司的角色
        showArea: false, // 获取所有场所数据后显示场所信息
        districtData: [],
        regionData: [],
        province: [],
        city: null,
        district: null,
        wmData: [],
        showWm: false, // 获取所有场所数据后显示仓库信息
        wmChecked: [], // 选中的数据
        // 库管级别字段
        WM_LEVEL_ENUM: [
          // {
          //   label: '全国',
          //   value: 1
          // },
          {
            label: '省级',
            value: 2
          },
          {
            label: '市级',
            value: 3
          },
          // {
          //   label: '区',
          //   value: 4
          // },
          // {
          //   label: '街道',
          //   value: 5
          // },
          // {
          //   label: '场所',
          //   value: 6
          // }
        ],
      }
    },
    watch: {
      form: {
        handler (val) {
          this.peopleForm = JSON.parse(JSON.stringify(val))
        },
        immediate: true,
        deep: true
      },
      dialogVisible: {
        handler (val) {
          if (val === false) {
            this.$refs['peopleForm'].resetFields()
          } else {
            this.getRestoreFormData()
          }
        }
      },
    },
    computed: {
      ...mapGetters('user', {
        module: 'dealedModule',
        user: 'getUser',
        role: 'getRole',
      }),
      /**
       * 当前所选角色的code编码
       * @return Number
       * */
      selectedRole () {
        return this.getRoleSortById(this.peopleForm.roleCode)
      },
      /**
       * 是否显示 管辖级别选择 下拉菜单
       * 仓库管理员 || 子运营公司管理员
       * @return Boolean
       * */
      isShowDistrictType () {
        if (this.selectedRole === this.ROLE_COMMUNITY) { // 场所管理员默认到小区级别
          return false
        }
        return this.hasRegionRole.includes(this.selectedRole)
      },
      /**
       * 是否显示 省份选择 下拉菜单
       * 有 管辖级别 字段角色，返回true
       * 无 管辖级别 字段角色，返回false
       * @return Boolean
       * */
      isShowProvinceCode () {
        if (this.peopleForm.districtType) { // 有管辖级别字段，省或市
          return this.hasRegionRole.includes(this.selectedRole)
        }
        return false
      },
      /**
       * 是否显示 城市选择 下拉菜单
       * 有 管辖级别 字段角色，返回true
       * 无 管辖级别 字段角色，只有 场所管理员 返回true
       * @return Boolean
       * */
      isShowCityCode () {
        if (!this.peopleForm.provinceCode) { // 没有选择省份
          return false
        }
        if (this.peopleForm.districtType && this.peopleForm.districtType === 3) { // 有管辖级别字段，且为市
          return this.hasRegionRole.includes(this.selectedRole)
        } else {
          const temp = [this.ROLE_COMMUNITY]
          return temp.includes(this.selectedRole)
        }
      },
      /**
       * 是否显示 场所选择
       * 场所管理员
       * @return Boolean
       * */
      isShowCommunitySelect () {
        if (!this.peopleForm.provinceCode || !this.peopleForm.cityCode) { // 没有选择省份 || 城市
          return false
        }
        if (!this.showArea) {
          return false
        }
        const temp = [this.ROLE_COMMUNITY]
        return temp.includes(this.selectedRole)
      },
      /**
       * 是否显示 仓库选择
       * 仓库管理员
       * @return Boolean
       * */
      isShowStoreSelect () {
        if (this.peopleForm.districtType === 2 && !this.peopleForm.provinceCode) { // 没有选择省份
          return false
        }
        if (this.peopleForm.districtType === 3 && !this.peopleForm.cityCode) { // 没有选择城市
          return false
        }
        if (!this.showWm) {
          return false
        }
        const temp = [this.ROLE_WM]
        return temp.includes(this.selectedRole)
      },
      /**
       * 是否显示选择运营公司
       * 登录用户sort为80，大于80，并且创建子运营公司，库管
       * */
      isShowOperateCompany () {
        return this.hasCompanyRole.includes(this.selectedRole) && this.role[0].sort >= this.ROLE_COMPANY
      }
    },
    created () {
      this.initRegionRole()
    },
    async mounted () {
      this.companys = await this.getOperateCompany()
      this.getRestoreFormData()
      console.log('this.peopleForm ', this.peopleForm)
    },
    methods: {
      /**
       * 初始化是否有 管辖级别 字段的角色数组
       * 有管辖级别：场所管理员，消防支队，仓库管理员，子运营公司管理员（有districtType字段）
       * 无管辖级别：运营公司管理员，超级管理员，西安测试
       * 有运营公司：运营公司管理员，子运营公司管理员，仓库管理员
       * */
      initRegionRole () {
        this.hasRegionRole = [this.ROLE_COMMUNITY, this.ROLE_FIRE, this.ROLE_WM, this.ROLE_SUB_COMPANY]
        this.noRegionRole = [this.ROLE_COMPANY, this.ROLE_VISTOR, this.ROLE_C_GENERAL,
          this.ROLE_SU, this.ROLE_CMU, this.ROLE_MU, this.ROLE_TEST, this.ROLE_MARKET]
        this.hasCompanyRole = [this.ROLE_COMPANY, this.ROLE_SUB_COMPANY, this.ROLE_WM]
      },
      /**
       * 获取所有的运营公司
       * */
      getOperateCompany () {
        return new Promise((resolve, reject) => {
          const url = `${Config.DEVICE_MANAGE_URL}/operate_company/company_query_common`
          this.$http.get(url)
            .then(data => {
              if (data && data.array) {
                resolve(data.array)
                return
              }
              resolve([])
            })
            .catch(() => resolve([]))
        })
      },
      /**
       * 获取还原用户编辑的数据
       * */
      getRestoreFormData () {
        console.log('this.peopleForm ', this.peopleForm)
        if (this.title === this.PEOPLE_EDIT) {
          const roleCode = this.getRoleSortById(this.peopleForm.roleCode)
          console.log('this.hasRegionRole ', this.hasRegionRole)
          if (!this.hasRegionRole.includes(roleCode)) {
            return
          }

          this.regionData = regionData
          this.province = this.getAreaObjByValue(regionData, this.peopleForm.provinceCode)
          this.city = this.getAreaObjByValue(this.province.children, this.peopleForm.cityCode)

          console.log('roleCode ', roleCode)
          console.log('selectedRole ', this.selectedRole)
          console.log('this.city ', this.city)
          switch (roleCode) {
            case this.ROLE_COMMUNITY: // 场所管理员
              this.getAllCommunity()
              break
            case this.ROLE_WM: // 仓库管理员
              if (this.peopleForm.districtType === 2) { // 省级库管
                this.getAllStore({
                  province: this.peopleForm.provinceCode,
                  store_level: this.peopleForm.districtType
                })
              }
              if (this.peopleForm.districtType === 3) { // 市库管
                this.getAllStore({
                  province: this.peopleForm.provinceCode,
                  city: this.peopleForm.cityCode,
                  store_level: this.peopleForm.districtType
                })
              }
          }
        }
      },
      /**
       * 角色改变
       * */
      async roleChange () {
        if (this.selectedRole === this.ROLE_COMMUNITY) { // 场所管理员，默认管辖级别
          this.peopleForm.districtType = 6 // 场所对应的是6
        } else {
          this.peopleForm.districtType = ''
        }
        this.peopleForm.districtId = ''
        this.peopleForm.districtName = ''
        this.peopleForm.provinceCode = ''
        this.peopleForm.cityCode = ''
        this.regionData = regionData
        this.districtData = []
        this.wmData = []
      },
      /**
       * 库管界别变化
       * */
      wmLevelChange () {
        this.peopleForm.provinceCode = ''
        this.peopleForm.cityCode = ''
      },
      /**
       * 省份变化
       * */
      provinceChange (val) {
        this.peopleForm.cityCode = ''

        this.province = this.getAreaObjByValue(regionData, val)
        const role = this.getRoleSortById(this.peopleForm.roleCode)
        if (role === this.ROLE_WM && this.peopleForm.districtType === 2) { // 省级库管
          this.getAllStore({
            province: this.peopleForm.provinceCode,
            store_level: this.peopleForm.districtType
          })
        }
        if (role === this.ROLE_FIRE && this.peopleForm.districtType === 2) { // 省消防支队
          this.peopleForm.districtId = this.peopleForm.provinceCode
          this.peopleForm.districtName = this.province.label
        }
        if (role === this.ROLE_SUB_COMPANY && this.peopleForm.districtType === 2) { // 子运营公司管理员
          this.peopleForm.districtId = this.peopleForm.provinceCode
          this.peopleForm.districtName = this.province.label
        }
      },
      /**
       * 城市变化变化
       * */
      cityChange (val) {
        this.peopleForm.districtId = ''
        this.peopleForm.districtName = ''

        this.city = this.getAreaObjByValue(this.province.children, val)
        console.log(this.city)
        const role = this.getRoleSortById(this.peopleForm.roleCode)
        if (role === this.ROLE_COMMUNITY) { // 场所管理员
          this.getAllCommunity()
        }
        if (role === this.ROLE_WM && this.peopleForm.districtType === 3) { // 市库管
          this.getAllStore({
            province: this.peopleForm.provinceCode,
            city: this.peopleForm.cityCode,
            store_level: this.peopleForm.districtType
          })
        }
        if (role === this.ROLE_FIRE && this.peopleForm.districtType === 3) { // 市消防支队
          this.peopleForm.districtId = this.peopleForm.cityCode
          this.peopleForm.districtName = this.city.label
        }
        if (role === this.ROLE_SUB_COMPANY && this.peopleForm.districtType === 3) { // 子运营公司管理员
          this.peopleForm.districtId = this.peopleForm.cityCode
          this.peopleForm.districtName = this.city.label
        }
      },
      /**
       * 获取区域信息
       * @param {Array} arr
       * @param {Array} value
       * @return {Object} obj
       * */
      getAreaObjByValue (arr, value) {
        let obj = null
        arr.some(item => {
          if (value === item.value) {
            obj = item
            return true
          }
        })
        return obj
      },
      /**
       * 根据角色id获取角色权重
       * @param {String} id
       * @return {String} role.sort
       * */
      getRoleSortById (id) {
        let role = {sort: ''}
        this.roleEnum.some(item => {
          if (id === item.id) {
            role = item
            return true
          }
        })
        return role.sort
      },
      /**
       * 获取所有的场所
       * */
      getAllCommunity () {
        console.log('getAllCommunity')
        const url = `${Config.DEVICE_MANAGE_URL}/final_equipsite/query`
        const param = {
          page: 0,
          size: 2000, // 给个比较大的数就行
          province: this.province.value,
          city: this.city.value
        }
        this.$http.get(url, param)
          .then(data => {
            const list = data.array
            const district = this.getDistrictFromComunitys(list)
            this.handleData(district, list)
            console.log('district ', district)
            if (!this.districtHasCommunity(district)) {
              this.$message.warning('所选地区暂无场所')
            }
            this.showArea = true
            this.districtData.splice(0)
            district.forEach(item => {
              if (this.peopleForm.areaCode) {
                if (this.peopleForm.areaCode === item.value) {
                  item.selected = true
                } else {
                  item.selected = false
                }
              }
              this.districtData.push(item)
            })
            console.log('this.districtData ', this.districtData)
          })
      },
      /**
       * 判断所选区是否有场所
       * */
      districtHasCommunity (district) {
        let bool = false
        district.some(item => {
          if (item.arr.length !== 0) {
            bool = true
          }
        })
        return bool
      },
      /**
       * 从后台所有场所中筛选出区
       * @param {Array} list 场所列表
       * @return {Array} district
       * */
      getDistrictFromComunitys (list) {
        const district = []
        this.city.children.forEach(item => {
          district.push({
            value: item.value,
            label: item.label,
            arr: []
          })
        })
        return district
      },
      handleData (district, list) {
        list.forEach(item => {
          district.some(i => {
            if (i.value === item.district) {
              i.arr.push(item)
              return true
            }
          })
        })
      },
      /**
       * 获取所有的仓库
       * */
      getAllStore (obj) {
        const url = `${Config.DEVICE_MANAGE_URL}/storehouses/query_common`
        let param = {
          page: 0,
          devtype: Config.objType.devtype,
          // devname: 'fireplug' 查询仓库不能有这个字段
        }
        param = {...param, ...obj}
        this.$http.get(url, param)
          .then(data => {
            console.log(data)
            const list = data.array
            this.wmData.splice(0)
            this.wmData = list
            this.showWm = true
            if (list.length === 0) {
              this.$message.warning('所选地区暂无仓库')
            }
          })
      },
      /**
       * 仓库变化
       * */
      wmChange (name) {
        let temObj = null
        this.wmData.some(item => {
          if (item.name === name) {
            temObj = item
            return true
          }
        })
        this.peopleForm.districtId = this.peopleForm.districtType === 3 ? temObj.city : temObj.province
        this.peopleForm.areaCode = temObj.district
      },
      /**
       * 场所全选
       * */
      checkAll(item, obj, arr) {
        const province = this.getAreaObjByValue(regionData, this.peopleForm.provinceCode)
        const city = this.getAreaObjByValue(province.children, this.peopleForm.cityCode)
        const district = this.getAreaObjByValue(city.children, item.value)

        console.log('district.value ', district.value)
        this.peopleForm.areaCode = district.value
        this.peopleForm.area = item
        this.peopleForm.districtId = obj.id
        this.peopleForm.districtName = `${province.label}${city.label}${district.label}${obj.site_name}`

        arr.forEach(i => {
          if (item.value === i.value) {
            i.selected = true
          } else {
            i.selected = false
          }
        })
        console.log('arr ', arr)
        console.log('item ', item)
        console.log(this.peopleForm)
      },
      /**
       * 运营公司选择变化
       * */
      operateCompanyChange (val) {
        console.log(this.peopleForm.company)
      },
      cancel () {
        this.$emit('hide', 'cancel')
        this.$refs['peopleForm'].resetFields()
      },
      sure (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.save()
          } else {
            this.$message(
              {
                message: '格式不正确',
                type: 'warning'
              }
            )
            return false
          }
        })
      },
      /**
       * 保存数据
       * */
      save () {
        if (this.hasRegionRole.includes(this.selectedRole) && !this.peopleForm.districtId) {
          this.$message.warning('管辖区域不能为空')
          return
        }
        let url = `${Config.AUTH_URL}/user/editUserAndDistrict`
        const param = JSON.parse(JSON.stringify(this.peopleForm))
        delete param.area
        delete param.role
        console.log('提交后台的数据  ', param)

        this.$http.post(url, param)
          .then(data => {
            console.log(data)
            this.$emit('hide', true)
            this.$refs['peopleForm'].resetFields()
          })
          .catch(e => {
            this.$emit('hide', false)
            this.$refs['peopleForm'].resetFields()
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .create-people {
    .el-input, .el-select {
      width: 260px;
    }
    .manage-district {
      height: auto
    }
    .manage-district /deep/ .el-form-item__content {
      line-height: 32px;
    }
    .active {
      background: $red;
      padding: 0px 6px;
      color: $white !important;
      border-radius: 10px;
      text-align: center;
      min-width: 22%;
    }
    .more {
      color: $gray6;
      float: left;
      width: 100%;
      &:after {
        clear: both;
      }
      li {
        float: left;
        height: 28px;
        font-size: 14px;
        cursor: pointer;
        min-width: 120px;
        position: relative;
        margin-bottom: 15px;
        .more-con,
        .spancolor {
          color: #333;
          display: inline-block;
        }
        &:not(:first-child) .more-con:after {
          content: "";
          margin-left: 4px;
          vertical-align: 0px;
          border: 4px solid transparent;
          border-top-color: $gray6;
          display: inline-block;
        }
        .popover {
          display: none;
          width: 528px;
          position: absolute;
          top: 32px;
          left: 0px;
          z-index: 1000;
          cursor: auto;
          user-select: text;
          white-space: normal;
          font-size: 12px;
          line-height: 1.5;
          font-weight: 500;
          text-align: left;
          background: $white;
          box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
          border: 1px solid #e5e5e5;
          border-radius: 4px;
          .arrow {
            border-width: 5px;
            left: 26px;
            top: -10px;
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent transparent #e5e5e5;
            border-style: solid;
          }
          .arrow:after {
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            content: "";
            margin-top: -3px;
            margin-left: -4px;
            border-width: 4px;
            border-color: transparent transparent $white;
          }
          .p-content {
            background-color: #fff;
            background-clip: padding-box;
            border-radius: 4px;
            .popover-content {
              padding: 24px 0 24px 24px;
              span {
                color: #ccc;
                font-size: 16px;
                cursor: default;
                display: block;
              }
            }
            .community {
              padding: 0px 24px 15px 24px;
              width: 100%;
              display: inline-block;
              box-sizing: border-box;
              li {
                font-weight: 400;
                min-width: 25%;
                margin-bottom: 5px;
                margin-right: 10px;
                float: left;
                line-height: 20px;
                text-align: center;
                padding-top: 5px;
                span:hover {
                  background: $red;
                  color: $white !important;
                  border-radius: 10px;
                  box-sizing: border-box;
                  padding: 0px 6px;
                }
              }
            }
          }
        }
      }
      li:hover .popover {
        display: block;
      }
    }
    .dialog-footer {
      margin-top: 20px;
      text-align: center;
      .btnClosed {
        width: 86px;
        height: 28px;
        padding: 0;
        background: #bebebe;
        border: #bebebe;
        span{
          font-size: 14px;
        }
      }
      .btnClosed:hover {
        background: #cecece;
        border: #cecece;
      }
      .btnClosed:active {
        background: #b2b2b2;
        border: #b2b2b2;
      }
      .btnSaved{
        width: 86px;
        height: 28px;
        padding: 0;
        span{
          font-size: 14px;
        }
      }
    }
  }
</style>
